<template>
	<view class="container">
		<view class="contItem" v-for="item in info">
			<view class="">
				<view class="plr-40 ptb-10" style="background-color: rgb(229, 229, 229);">{{item.letter}}</view>
				<view class="flex flex-start plr-40 ptb-10 friendInfo" v-for="i in item.data">
					<!-- 	<label class="radio" >
						<radio value="" :checked="checked" @click="checkfn(item)"/>
					</label> -->
					<u-checkbox-group @change="checkboxChange(i)">
						<u-checkbox v-model="i.active">
						</u-checkbox>
					</u-checkbox-group>
					<image :src="'http://im.ezongguan.com/static/photo/'+i.photo" mode="widthFix" style="width: 80rpx;">
					</image>
					<view class="ml-20">{{i.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [],
				value: '',
				list_id: '',
				info: '',
				checked: false,
				users: []
			}
		},
		onLoad(options) {
			this.list_id = options.list_id
		},
		onShow() {
			this.init()

		},
		onNavigationBarButtonTap: function(e) {
			this.addchat()
		},
		methods: {
			// 确认创建群聊
			addchat() {
				var params = {
					_token: uni.getStorageSync('im_token'),
					users: JSON.stringify(this.arr),
					_agent_id: '1',
					list_id:0,
				}
				uni.request({
					url: `http://im.ezongguan.com/im/message/addGroup`,
					method: 'POST',
					data: params,
					success: (res) => {
						console.log(res)
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 0
							})
						}, 1000)
					},
				})
			},
			checkboxChange(i) {
				// console.log(i);
				// 复选框查找并且删除重复
				if (i.active == true) {
					this.arr.push(i.user_id)
					console.log(this.arr);
				} else {
					this.arr.splice(this.arr.findIndex(item => item === i.user_id), 1);
					console.log(this.arr.includes(i.user_id, 0));
				}

			},
			checkfn(item) {
				console.log(item)
			},
			init() {
				var params = {
					_token: uni.getStorageSync('im_token'),
					_agent_id: '1',
					list_id:0,
					friend: 1,
				}
				uni.request({
					url: `http://im.ezongguan.com/im/get/friendList`,
					method: 'POST',
					data: params,
					success: (res) => {
						console.log(res.data.data)
						this.info = res.data.data.data
						console.log(this.info);
						// this.infoo=res.data.data.data
						// console.log(this.infoo)
					},
				})
				console.log(this.users)
			}
		}
	}
</script>

<style lang="less" scoped>
	.friendInfo {
		border-bottom: 1rpx solid rgb(229, 229, 229);
	}

	::v-deep  .uni-radio-input-checked {
		background-color: #77be6e !important;
		border-color: #77be6e !important;
	}

	::v-deep  .uni-radio-input {
		width: 36rpx;
		height: 36rpx;
	}
</style>
